<template>
  <FrontSideTreeTable
    treeDataUrl="/param/diseaseType/getPositionPartsTree"
    tableDataUrl="/param/diseaseType/getList"
    addUrl="/param/diseaseType/add"
    editUrl="/param/diseaseType/edit"
    deleteUrl="/param/diseaseType/delete"
    treeTitle="部件"
    :tableTitle="selectedNode.name+'病害类型列表'"
    :tableProps="{parentId:'partsTypeId'}"
    :columns="columns"
    searchHint="根据病害名、部位或评定指标查找"
    :searchProps="searchProps"
    :form="form"
    :rules="rules"
    :loadingForm="loadingForm"
    @beforeAdd="handleAdd"
    @beforeEdit="handleEdit"
    @onNodeClick="handleNodeClick"
    @onTableCreated="handleTableCreated"
    @onTreeCreated="handleTreeCreated">

    <template slot="form">
      <!--新增或删除表单-->
      <el-form-item label="病害名称" prop="name">
        <el-input v-model="form.name" placeholder="输入病害名称"></el-input>
      </el-form-item>

      <el-form-item label="所属部件" prop="partsTypeId">
        <el-select v-model="form.partsTypeId" style="width:100%" placeholder="请选择部件，输入文字可搜索" filterable>
          <el-option-group v-for="group of positionParts" :key="group.id" :label="group.name">
            <el-option v-for="item of group.children" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-option-group>
        </el-select>
      </el-form-item>

      <el-form-item label="评定指标">
        <el-select v-model="form.evaluationIndexId" style="width:100%" placeholder="请选择评定指标，输入文字可搜索" filterable clearable>
          <el-option-group v-for="group of evaluationIndexList" :key="group.id" :label="group.name">
            <el-option v-for="item of group.children" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-option-group>
        </el-select>
      </el-form-item>

      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.notes"></el-input>
      </el-form-item>
    </template>

  </FrontSideTreeTable>
</template>

<script>
  import FrontSideTreeTable from "../../template/FrontSideTreeTable.vue"
  import {doGet} from "../../../assets/js/utils/RequestUtils"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"
  import {childrenArrayOf} from "../../../assets/js/utils/TreeUtils"

  //用于重复行校验
  let oldName = "",
    oldPartsTypeId = "",
    oldEvaluationIndexId = "";

  //下拉菜单数据获取地址
  const EVALUATION_INDEX_URL = "/param/evaluationIndex/getList";

  export default {
    name:"DiseaseTypeMaintenance",
    data() {
      //名称校验
      let nameValidator = (rule, value, callback)=>{
        if(value === oldName && this.form.partsTypeId === oldPartsTypeId && this.form.evaluationIndexId === oldEvaluationIndexId) {
          callback();
        } else if (this.dataList.some(item=>item.name === value && this.form.partsTypeId === item.partsTypeId && this.form.evaluationIndexId === item.evaluationIndexId)) {
          callback(new Error("出现相同名称、部件及指标的病害"));
        } else {
          callback();
        }
      };

      return {
        dataList:[],
        treeData:[],
        partsTypeList:[],
        evaluationIndexList:[],
        columns:[
          {prop:"name", label:"病害名称"},
          {prop:"evaluationIndexName", label:"评定指标名"},
          {prop:"partsTypeName", label:"所属部件"},
          {prop:"notes", label:"备注"}
        ],
        searchProps:["name", "evaluationIndexName", "partsTypeName"],
        form:{
          name:"",
          partsTypeId:"",
          evaluationIndexId:""
        },
        rules:{
          name:[
            {required:true, message:"请输入病害名", trigger:"blur"},
            {validator:nameValidator, trigger:"blur"}
          ],
          partsTypeId:[
            {required:true, message:"请选择部件类型", trigger:"blur"}
          ]
        },
        loadingForm:false,
        selectedNode:{name:"", id:""}
      }
    },
    computed: {
      positionParts() {
        let result = [];
        let pNodes = this.treeData.filter(item=>!item.parentId);
        let cNodes = this.treeData.filter(item=>!!item.parentId);
        pNodes.forEach(pNode=>result.push({children:childrenArrayOf(pNode, cNodes), ...pNode}));
        return result;
      }
    },
    methods:{
      handleNodeClick(data) {
        this.selectedNode = data;
      },
      handleTreeCreated(data) {
        this.treeData = data;
      },
      handleTableCreated(data) {
        this.dataList = data;
      },
      handleAdd() {
        this.fetchData();
        oldName = oldPartsTypeId = oldEvaluationIndexId = "";
        this.form = {partsTypeId:this.selectedNode.id, evaluationIndexId:""};
      },
      handleEdit(data) {
        this.fetchData();
        oldName = data.name;
        oldPartsTypeId = data.partsTypeId;
        oldEvaluationIndexId = data.evaluationIndexId;
        this.form = {...data};
      },
      fetchData() {
        this.loadingForm = true;
        doGet(EVALUATION_INDEX_URL, {component:this}).then(response=>{
          //第一步，获取部位数组
          let positionTypes = this.treeData.filter(item=>!item.parentId);
          //第二部，获取部位数组对应的评价指标
          let result = [];
          positionTypes.forEach(position=>result.push({children:response.filter(e=>e.positionTypeId === position.id), ...position}));
          this.evaluationIndexList = result;
        })
          .finally(()=>this.loadingForm = false);
      }
    },
    components:{FrontSideTreeTable}
  }
</script>



// WEBPACK FOOTER //
// DiseaseTypeMaintenance.vue?38783c39